<template>
    <main>
        <div class="mark-top"></div>
        <div class="page-title">
            <Icon :name="pageConf.titleIcon" size="32px" />
            {{ pageConf.title }}
        </div>
        <div class="container">
            <InfoCard>
                <template #header>
                    <div class="header-tpl">
                        <Icon name="gold-coin" />
                        <div style="margin: 0 8px;">{{ pageConf.price }}</div>
                        <Button style="margin-left: 8px;" type="primary" size="small" icon="description"
                            @click="onCopy(pageConf.price)">复制</Button>
                    </div>
                </template>
                <template #content>
                    <div class="content-tpl">
                        <div style="display: flex;justify-content: center;
                        align-items: center;margin-bottom: 8px;">订单编号: {{ pageConf.orderNo }}<Button
                                style="margin-left: 8px;" size="small" icon="description"
                                @click="onCopy(pageConf.orderNo)"></Button></div>
                        <div class="flex">
                            截止付款倒计时: <CountDown :time="pageConf.countdown"></CountDown>
                        </div>
                    </div>
                </template>
            </InfoCard>

            <InfoCard style="border: 2px dashed rgb(180, 180, 180);">
                <template #header>
                    <div class="flex justify-center align-center">
                        {{ pageConf.qrcodeTop }}
                    </div>
                </template>
                <template #content>
                    <div class="flex justify-center align-center">
                        <vant-img width="200px" height="200px" :src="pageConf.qrcode"></vant-img>
                    </div>
                    <div class="flex justify-center align-center">
                        {{ pageConf.qrcodeBelow }}
                    </div>
                </template>
            </InfoCard>


        </div>

    </main>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Icon, Button, Image as VantImg, showNotify } from "vant";
import InfoCard from "@/components/InfoCard.vue"
import CountDown from "@/components/CountDown.vue"

const pageConf = ref({
    title: '此处为页面标题',
    titleIcon: 'alipay',
    price: 299.00,
    orderNo: 'P541684986416541684984',
    countdown: 30 * 60 * 60, // 传入过期倒计时,
    qrcode: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    qrcodeTop: '我是上方描述',
    qrcodeBelow: '我是下方描述'
})

function onCopy(content: string | number) {
    navigator.clipboard.writeText(String(content)).then(() => {
        // 复制成功
        showNotify({ type: 'success', message: '复制成功' })
    }).catch(() => {
        // 复制失败
        showNotify({ type: 'danger', message: '复制失败' })
    })
}
</script>

<style scoped lang="less">
.mark-top {
    width: 100%;
    height: 120px;
    background-color: rgb(84, 188, 189);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.page-title {
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

.container {
    margin-top: 8px;
    padding: 8px;

    .header-tpl {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f50;
        font-weight: bold;
        font-size: 30px;
    }

    .content-tpl {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: bold;

        >div::before {
            content: ' * ';
            color: #f50;
        }
    }
}
</style>